@import '~@common/css/_variables.scss';

.loading {
  display: flex;
  width: 100%;
  font-size: 14px;
  font-weight: 200;
  color: $color;
  align-items: center;
  justify-content: center;

  ul {
    display: flex;
    height: 10px;

    li {
      width: 1px;
      height: 100%;
      margin-right: 2px;
      background-color: $color;
      animation: dance 1s infinite;

      &:nth-child(2) {
        animation-delay: -0.4s;
      }

      &:nth-child(3) {
        animation-delay: -0.6s;
      }

      &:nth-child(4) {
        animation-delay: -0.5s;
      }

      &:nth-child(5) {
        animation-delay: -0.2s;
      }
    }
  }
  @keyframes dance {
    0%,
    40%,
    100% {
      transform: scaleY(0.4);
      transform-origin: center 100%;
    }

    20% {
      transform: scaleY(1);
    }
  }
}
